
<template>
    <div class="table">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="date" label="报警时间" width="200"></el-table-column>
            <el-table-column prop="area_name" label="所属区域" width="150"></el-table-column>
            <el-table-column prop="p_name" label="项目名称" width=""></el-table-column>
            <el-table-column prop="name" label="设备名称" width=""></el-table-column>
            <el-table-column prop="gate" label="报警类型" width="">
               <template slot-scope="scope">
                    <span :class="{
                    'ed-row':scope.row.gate=='设备离线',
                    'warning-row':scope.row.gate=='通讯异常',
                    'report-row':scope.row.gate=='阈值报警'}"
                    >{{scope.row.gate}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="mark" label="备注" width="200"></el-table-column>
        </el-table>
        <el-pagination
        class="mt20"
            background
            layout="prev, pager, next"
            :total="100">
        </el-pagination>
    </div>
</template>

<script>
import tableData from '@/utils/report-data.js'
export default {
  name: "tableData",
  data() {
    return {
       tableData:tableData
    };
  },
  methods: {
    tableRowStyle({ row, rowIndex }) {
          if(row.gate=='设备离线'){
            return 'background-color: pink'
          }
        if(row.gate=='阈值报警'){
            return 'background-color: #96CDCD'
        }
        /* if(row.gate=='通讯异常'){
            return 'background-color: darkred'
        }*/
    },
     tableRowClassName({row, rowIndex}) {
        if (row.gate=='设备离线') {
          return 'ed-row';
        } else if (row.gate=='阈值报警') {
          return 'report-row';
        }else if (row.gate=='通讯异常') {
          return 'warning-row';
        }
        return '';
      }
  }
};
</script>

<style>
 .el-table .warning-row{
       color: #b5b514;
  }
 .el-table .ed-row{
       color: #ccc;
  }

  .el-table .report-row {
    color: red;
  }
</style>

